<template>
<el-row class="container">
    <CommonHeader></CommonHeader>
    <el-col :span="24" class="main">
        <SideMenu></SideMenu>
        <section class="content-container">
            <div class="grid-content bg-purple-light">
                <el-col :span="24" class="breadcrumb-container">
                    <!-- <strong class="title">{{$route.name}}</strong> -->
                    <el-breadcrumb separator="/" class="breadcrumb-inner">
                        <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                            {{ item.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
                <el-col :span="24" class="content-wrapper">
                    <transition name="fade" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </el-col>
            </div>
        </section>
    </el-col>
</el-row>
</template>

<script>
import CommonHeader from "@/components/common/CommonHeader";
import SideMenu from "@/components/common/SideMenu";

export default {
    components: {
        CommonHeader,
        SideMenu,
    }
}
</script>

<style lang="scss">
@import '~scss_vars';


.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;

    .header {
        height: 60px;
        line-height: 60px;
        background: #3c4049;
        color: #fff;

        .userinfo {
            text-align: right;
            padding-right: 35px;
            float: right;

            .userinfo-inner {
                cursor: pointer;
                color: #fff;

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    margin: 10px 0px 10px 10px;
                    float: right;
                }
            }
        }

        .logo {
            //width:230px;
            height: 60px;
            font-size: 22px;
            padding-left: 20px;
            padding-right: 20px;
            border-color: rgba(238, 241, 146, 0.3);
            border-right-width: 1px;
            border-right-style: solid;

            img {
                width: 40px;
                float: left;
                margin: 10px 10px 10px 18px;
            }

            .txt {
                color: #fff;
            }
        }

        .logo-width {
            width: 230px;
        }

        .logo-collapse-width {
            width: 60px
        }

        .tools {
            padding: 0px 23px;
            width: 14px;
            height: 60px;
            line-height: 60px;
            cursor: pointer;
        }
    }

    .main {
        display: flex;
        top: 60px;
        bottom: 0px;
        overflow: hidden;
        min-height: 100%;

    }
}
</style>
